<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户、用户组和用户组权限</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" rel="external nofollow" />
  <style>
  body{padding:20px;}
  .box{padding:5px;width:220px;margin-bottom:20px;}
  .tbs {padding-right: 20px;}
  </style>
</head>
<body>
<div class="box">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">添加用户</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">查看用户</button>
</div>

<div class="box">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">添加用户组</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal4">查看用户组</button>
</div>

<div class="box">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal5">添加节点</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal6">查看节点</button>
</div>

<!--添加用户 start-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="username" class="control-label">用户名：</label>
            <input type="text" class="form-control" id="username">
          </div>
          <div class="form-group">
            <label for="password" class="control-label">密码：</label>
            <input type="text" class="form-control" id="password">
          </div>
          <div class="form-group">
            <label class="control-label">所属组：</label>
            <select class="form-control" name="pid">
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div>
  </div>
</div>
<!--添加用户 end-->

<!--查看用户 start-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel4">查看用户</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<!--查看用户 end-->

<!--查看节点 start-->
<div class="modal fade" id="exampleModal6" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel6">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel6">查看节点</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<!--查看节点 end-->


<!--添加用户组 start-->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe3">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabe3">添加用户组</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="name" class="control-label">用户组：</label>
            <input type="text" class="form-control" id="name">
          </div>
          <div class="form-group">
            <label class="control-label">状态：</label>
            <label class="radio-inline"><input type="radio" id="inlineRadio1" name="status" value="0">未激活</label>
            <label class="radio-inline"><input type="radio" checked id="inlineRadio2" name="status" value="1">已激活</label>
          </div>
          <div class="form-group">
            <label class="control-label">上级组：</label>
            <select class="form-control" name="pid">
            </select>
          </div>
          <div class="form-group">
            <label class="control-label">备注：</label>
            <textarea class="form-control" name="remark" rows="3"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div>
  </div>
</div>
<!--添加用户 end-->

<!--添加节点 start-->
<div class="modal fade" id="exampleModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe5">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabe5">添加节点</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="name" class="control-label">model：</label>
            <input type="text" class="form-control" id="model">
          </div>
          <div class="form-group">
            <label for="name" class="control-label">action：</label>
            <input type="text" class="form-control" id="action">
          </div>
          <div class="form-group">
            <label class="control-label">上级权限（model）：</label>
            <select class="form-control" name="pid">
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div>
  </div>
</div>
<!--添加节点 end-->

<!--查看用户组 start-->
<div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel4">查看用户组</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<!--查看用户 end-->

<!--用户组授权 end-->
<div class="modal fade" tabindex="-1" id="modelAuth" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">授权</h4>
      </div>
      <div class="modal-body" id="sq">
      </div>
      <input type="hidden" value="" id="sid" />
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--信息提示 start-->
<div class="modal fade" tabindex="-1" id="modelMsg" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">提示</h4>
      </div>
      <div class="modal-body">
        <p id="msg"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
  <script src="./js/jquery.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script>
//授权
function auth(id)
{
    //查看用户
    $.ajax(
    {  
        type:'post',      
        url:'./ajax.php?f=getAuth',  
        data:{id:id},
        dataType:'json',  
        success:function(data)
        { 
            if(data)
            {
                var str = '<table>';
                $.each(data,function(i,t)
                {
                    str += '<tr>';
                        str += '<th class="tbs" align="center">';
                            str += '<label class="checkbox-inline" for="'+ t.id +'">';
                                str += '<input type="checkbox" id="'+ t.id +'" name="nid['+ t.id +']" value="'+ t.id +'" '+ t.checked +'>' + t.action;
                            str += '</label>';
                        str += '</th>';
                        if(t.pid)
                        {
                            str += '<td>';
                                str += '<table>';
                            $.each(t.pid,function(mi,mt)
                            {
                                str += '<tr>';
                                    str += '<th class="tbs">';
                                        str += '<label class="checkbox-inline" for="'+ mt.id +'">';
                                            str += '<input type="checkbox" id="'+ mt.id +'" name="nid['+ mt.id +']" value="'+ mt.id +'" '+ mt.checked +'>' + mt.action;
                                        str += '</label>';
                                    str += '</th>';
                                    if(mt.pid)
                                    {
                                        str += '<td>';
                                            str += '<table>';
                                        $.each(mt.pid,function(li,lt)
                                        {
                                            str += '<tr>';
                                                str += '<th>';
                                                    str += '<label class="checkbox-inline" for="'+ lt.id +'">';
                                                        str += '<input type="checkbox" id="'+ lt.id +'" name="nid['+ lt.id +']" value="'+ lt.id +'" '+ lt.checked +'>' + lt.action;
                                                    str += '</label>';
                                                str += '</th>';
                                            str += '</tr>';
                                        });
                                            str += '</table>';
                                        str += '</td>';
                                    }
                                str += '</tr>';
                            });
                                str += '</table>';
                            str += '</td>';
                        }
                    str += '</tr>';
                });
                str += '</table>';
                $('#sq').html(str);
                $('#sid').val(id);
                $('#modelAuth').modal();
            }
        }
    }); 
}

$(function()
{
    
    //用户组授权
    $('#modelAuth').find('.btn-primary').click(function()
    {
        var obj = $('#modelAuth');
        var id = obj.find('#sid').val();
        var nid = '';
        var cobj = obj.find("input[type='checkbox']:checked");
        cobj.each(function(i,t)
        {
            if(i == cobj.length - 1)
            {
                nid += $(this).val();
            }
            else
            {
                nid += $(this).val() + ',';
            }
        });
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=setAuth',  
            data:{id:id,nid:nid},
            dataType:'json',  
            success:function(data)
            { 
                $('#msg').html(data.msg);
                $('#modelMsg').modal();
                return false;
            }
        });
        return false;
    });
    
    //查看用户
    $('#exampleModal').on('show.bs.modal', function (event)
    {
        var modal = $(this);
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=listUserGroup',  
            data:{},
            dataType:'json',  
            success:function(data)
            { 
                if(data)
                {
                    str = '';
                    $.each(data,function(i,t)
                    {
                        str += '<option value="'+ t.id +'">' + t.name + '</option>';
                    });
                    modal.find('.form-control').html(str);
                }
            }
        }); 
    });
    
    //查看节点
    $('#exampleModal6').on('show.bs.modal', function (event)
    {
        var modal = $(this);
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=listNode',  
            data:{},
            dataType:'json',  
            success:function(data)
            { 
                if(data)
                {
                    str = '<table class="table table-bordered"><th>ID</th><th>action</th><th>model</th><th>pid</th><th>level</th>';
                    $.each(data,function(i,t)
                    {
                        str += '<tr>';
                        str += '<td>' + t.id + '</td>';
                        str += '<td>' + t.action + '</td>';
                        str += '<td>' + t.model + '</td>';
                        str += '<td>' + t.pid + '</td>';
                        str += '<td>' + t.level + '</td>';
                        str += '</tr>';
                    });
                    str += '</table>';
                    modal.find('.modal-body').html(str);
                }
            }
        });
    });
    
    //添加用户
    $('#exampleModal').find('.btn-primary').click(function()
    {
        var username = $('#username').val();
        var password = $('#password').val();
        var pid = $("select[name='pid']").val();
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=addUser',  
            data:{username:username,password:password,pid:pid},
            dataType:'json',  
            success:function(data)
            { 
                $('#msg').html(data.msg);
                $('#modelMsg').modal();
                return false;
            },
            error:function()
            {
                
            }
        }); 
        return false;
    });
    
    //查看用户
    $('#exampleModal2').on('show.bs.modal', function (event)
    {
        var modal = $(this);
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=listUser',  
            data:{},
            dataType:'json',  
            success:function(data)
            { 
                if(data)
                {
                    str = '<table class="table table-bordered"><th>ID</th><th>用户名</th><th>用户组</th>';
                    $.each(data,function(i,t)
                    {
                        str += '<tr>';
                        str += '<td>' + t.id + '</td>';
                        str += '<td>' + t.username + '</td>';
                        str += '<td>' + t.name + '</td>';
                        str += '</tr>';
                    });
                    str += '</table>';
                    modal.find('.modal-body').html(str);
                }
            }
        }); 
    });
    
    //添加节点
    $('#exampleModal5').on('show.bs.modal', function (event) {
        var modal = $(this);
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=listNode',  
            data:{},
            dataType:'json',  
            success:function(data)
            { 
                if(data)
                {
                    str = '';
                    $.each(data,function(i,t)
                    {
                        if(t.pid == "0" || t.pid == "1")
                        {
                            var nt = t.pid == "1" ? '&nbsp;&nbsp;&nbsp;' : '' ;
                            str += '<option value="'+ t.id +'">' + nt + t.action + '</option>';
                        }
                    });
                    modal.find('.form-control').html(str);
                }
            }
        }); 
    });
    $('#exampleModal5').find('.btn-primary').click(function()
    {
        var action = $('#action').val();
        var model = $('#model').val();
        var pid = $('#exampleModal5').find("select[name='pid']").val();
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=addNode',  
            data:{action:action,model:model,pid:pid},
            dataType:'json',  
            success:function(data)
            { 
                $('#msg').html(data.msg);
                $('#modelMsg').modal();
                modal.find('#name').val('');
                return false;
            }
        }); 
        return false;
    });
    
    //添加用户组
    $('#exampleModal3').on('show.bs.modal', function (event) {
        var modal = $(this);
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=listUserGroup',  
            data:{},
            dataType:'json',  
            success:function(data)
            { 
                if(data)
                {
                    str = '';
                    $.each(data,function(i,t)
                    {
                        str += '<option value="'+ t.id +'">' + t.name + '</option>';
                    });
                    modal.find('.form-control').html(str);
                }
            }
        }); 
    });
    $('#exampleModal3').find('.btn-primary').click(function()
    {
        var name = $('#name').val();
        var status = $("input[type='radio']:checked").val();
        var pid = $("select[name='pid']").val();
        var remark = $("textarea[name='remark']").val();
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=addUserGroup',  
            data:{name:name,status:status,pid:pid,remark:remark},
            dataType:'json',  
            success:function(data)
            { 
                $('#msg').html(data.msg);
                $('#modelMsg').modal();
                modal.find('#name').val('');
                return false;
            }
        }); 
        return false;
    });
    
    //查看用户组
    $('#exampleModal4').on('show.bs.modal', function (event)
    {
        var modal = $(this);
        $.ajax(
        {  
            type:'post',      
            url:'./ajax.php?f=listUserGroup',  
            data:{},
            dataType:'json',  
            success:function(data)
            { 
                if(data)
                {
                    str = '<table class="table table-bordered"><th>ID</th><th>用户组</th><th>状态</th><th>操作</th>';
                    $.each(data,function(i,t)
                    {
                        str += '<tr>';
                        str += '<td>' + t.id + '</td>';
                        str += '<td>' + t.name + '</td>';
                        str += '<td>' + t.status + '</td>';
                        if(t.id != 1)
                        {
                            str += '<td><a href="javascript:;" onclick="auth('+ t.id +')">授权</a></td>';
                        }
                        else
                        {
                            str += '<td></td>';
                        }
                        str += '</tr>';
                    });
                    str += '</table>';
                    modal.find('.modal-body').html(str);
                }
            }
        }); 
    });
})  
  </script>
</body>
</html>